<template>
  <div>
    <!-- 用户信息区域 -->
    <div class="top">
      <div class="userInfo">
        <img @click="$router.push('userInfo')" :src="user.photo" alt="">
        <span>{{ user.name }}</span>
        <div class="today">
          <div>今日阅读</div>
          <div>0分钟</div>
        </div>
      </div>
      <div class="userMsg">
        <div class="item">
          <div>{{ user.art_count }}</div>
          <div>动态</div>
        </div>
        <div class="item">
          <div>{{ user.follow_count }}</div>
          <div>关注</div>
        </div>
        <div class="item">
          <div>{{ user.fans_count }}</div>
          <div>粉丝</div>
        </div>
      </div>
    </div>
    <!-- 收藏区域 -->
    <van-grid :column-num="3">
      <van-grid-item icon="star-o" text="收藏" />
      <van-grid-item icon="clock-o" text="历史" />
      <van-grid-item icon="records" text="作品" />
    </van-grid>
    <!-- 消息区域 -->
    <van-cell-group>
      <van-cell title="消息通知" is-link />
      <van-cell title="用户反馈" is-link />
      <van-cell @click="$router.push('/zhi')" title="小智同学" is-link />
    </van-cell-group>
  </div>
</template>

<script>
// 导入操作用户的方法
import { apiGetUser } from '../../api/user'
export default {
  data () {
    return {
      user: {}
    }
  },
  async mounted () {
    // 得到用户自己的信息
    var res = await apiGetUser()
    this.user = res.data.data
  }
}
</script>

<style lang="less">
.top {
  color: #fff;
  background-color: #3e9df8;
  .userInfo {
    padding: 30px 0px 10px 50px;
    display: flex;
    position: relative;
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .today {
      position: absolute;
      right: 0;
      top: 40px;
      font-size: 12px;
      text-align: center;
      background-color: #2b6ead;
      padding: 3px 15px;
      border-radius: 20px 0px 0px 20px;
    }
  }
  .userMsg {
    display: flex;
    padding-top: 10px;
    padding-bottom: 30px;
    .item {
      flex: 1;
      text-align: center;
    }
  }
}

i.van-icon.van-icon-star-o.van-grid-item__icon {
  color: red;
}

i.van-icon.van-icon-clock-o.van-grid-item__icon {
  color: #ffa939;
}

i.van-icon.van-icon-records.van-grid-item__icon {
  color: #779dff;
}
</style>
